var c = document.getElementById('c');
var ctx = c.getContext('2d');
c.width = window.innerWidth * window.devicePixelRatio;
c.height = window.innerHeight * window.devicePixelRatio;

/**
 * 三角函数周期性的特点决定了，他们在canvas编程中，在那些周期循环的且正负对称的动画效果中被频繁使用
 */

//平滑摆动
function createQquSwing() {
    var num = 80;
    var aqus = [];

    function Aqu(startPoint, color) {
        this.startPoint = [startPoint[0], startPoint[1]];
        this.endPointX = this.startPoint[0];
        this.endPointY = c.height / 1.5 - Math.random()*50;
        this.color = color || '#3b154e';
        this.amp = Math.random() * 10 + 40;
        this.bate = 0 + Math.random();
    };
    Aqu.init = function() {
        for(var i = 0; i < num; i += 1) {
            aqus.push(new Aqu(
                [Math.random() * c.width, c.height]
            ))
        }
    };
    Aqu.prototype = {
        draw: function() {
            var l = Math.sin(this.bate);
            this.endPointX = this.startPoint[0] + l * this.amp;

            ctx.save();
            ctx.lineWidth = 14;
            ctx.lineCap = "round";
            ctx.globalAlpha = 0.8;
            ctx.strokeStyle =this.color;
            ctx.beginPath();
            ctx.moveTo(this.startPoint[0], this.startPoint[1]);
            ctx.quadraticCurveTo(this.startPoint[0], c.height - 240, this.endPointX, this.endPointY);
            ctx.stroke();
            ctx.restore();
        }
    }

    Aqu.init();

    //动画函数
    function animate() {
        ctx.fillStyle = '#00bbff';
        ctx.fillRect(0, 0, c.width, c.height);

        for(var i = 0; i < aqus.length; i += 1) {
            aqus[i].bate += .05;
            aqus[i].draw();
        }

        requestAnimationFrame(animate);
    }

    animate();
    
}

createQquSwing();